<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Breadcrumb 面包屑</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">显示当前页面的路径，快速返回之前的任意页面。</p>
	<p class="desc">在 el-breadcrumb 中使用 el-breadcrumb-item 标签表示从首页开始的每一级。 该组件接受一个 String 类型的参数 separator来作为分隔符。 默认值为 '/'。</p>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item><a href="./affix.html">固钉</a></el-breadcrumb-item>
		<el-breadcrumb-item>列表页</el-breadcrumb-item>
		<el-breadcrumb-item>详情页</el-breadcrumb-item>
	</el-breadcrumb>
	
	<el-divider content-position="left">图标分隔符</el-divider><!-- =============================================================== -->
	<p class="desc">通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 失效。</p>
	<el-breadcrumb :separator-icon="Icons.ArrowRight">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item><a href="./affix.html">固钉</a></el-breadcrumb-item>
		<el-breadcrumb-item>列表页</el-breadcrumb-item>
		<el-breadcrumb-item>详情页</el-breadcrumb-item>
	</el-breadcrumb>
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>